<!DOCTYPE html>
<html lang="en">

<head>
    <title>productList</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="css/bootstrap.css">
    <link href="css/style.css" rel="stylesheet" type="text/css" media="all" />
    <link rel="stylesheet" type="text/css" href="http://www.jq22.com/jquery/font-awesome.4.6.0.css"><!-- 图标样式 -->
    <link rel="stylesheet" type="text/css" href="./css/goodDetail.css">
    <link href="css/owl.carousel.css" rel="stylesheet" type="text/css" media="all">

    <script src="js/jquery-2.2.3.min.js"></script>
    <script src="js/jquery-scrolltofixed-min.js" type="text/javascript"></script><!-- 导航栏 -->
    <script type="text/javascript" src="js/move-top.js"></script>
    <script type="text/javascript" src="js/easing.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/main.js"></script>
    <script src="js/owl.carousel.js"></script>
    <script src="js/jquery.menu-aim.js"></script>
    <script src="js/custom.js"></script>

</head>

<body>

    <div id="header"></div>

    <!-- products -->
    <div class="products">
        <div class="container">
            <div class="col-md-12 product-w3ls-right">
                <!-- breadcrumbs -->
                <ol class="breadcrumb breadcrumb1">
                    <li><a href="home.html">Home</a></li>
                    <li class="active">{{product.name}}</li>
                </ol>
                <!-- //breadcrumbs -->

                <div class="products-row">
                    <div class="col-md-3 product-grids" v-for="goods in goodsPage.list">
                        <div class="agile-products" @click="toDetail(goods.id)">
                            <div class="new-tag">
                                <h6>TOP1 <br> Hot</h6>
                            </div>
                            <a href="javascript:;"><img :src="goods.goodsPic" class="img-responsive" alt="img"></a>
                            <div class="agile-product-text">
                                <h5><a href="javascript:;"></a></h5>
                                <h6>${{goods.goodPrice}}</h6>
                                <h6>{{goods.goodTitle}}</h6>
                                <button type="submit" class="w3ls-cart pw3ls-cart">
                                    <i class="fa fa-cart-plus" aria-hidden="true"></i>查看详情
                                </button>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12">
                        <nav class="navbar-right" aria-label="Page navigation" v-if="goodsPage.pages>0">
                            <ul class="pagination">
                                <li :class="goodsPage.isFirstPage?'disabled':''">
                                    <a v-if="goodsPage.isFirstPage" href="javascript:void(0);" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                    <a v-else href="javascript:void(0);" @click="findPage(goodsPage.prePage)" aria-label="Previous">
                                        <span aria-hidden="true">&laquo;</span>
                                    </a>
                                </li>
                                <li v-for="i in goodsPage.navigatepageNums" :class="goodsPage.pageNum == i?'active':''"><a href="javascript:void(0);" @click="findPage(i)">{{i}}</a></li>
                                <li :class="goodsPage.isLastPage?'disabled':''">
                                    <a v-if="goodsPage.isLastPage" href="javascript:void(0);" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                    <a v-else href="javascript:void(0);" @click="findPage(goodsPage.nextPage)" aria-label="Next">
                                        <span aria-hidden="true">&raquo;</span>
                                    </a>
                                </li>
                            </ul>
                        </nav>
                    </div>
                    <div class="clearfix"> </div>
                </div>

                <!-- //add-products -->
            </div>
            <div class="clearfix"> </div>
        </div>
    </div>
    <!--//products-->

    <!--最热商品-->
    <div id="hot">

    </div>

    <div class="copy-right">
        <div class="container">
            <p>Copyright &copy; 2020.XB All rights reserved.<a target="_blank" href="#"></a></p>
        </div>
    </div>

    <script src="js/jquery-cookie-1.4.1.js"></script>
    <script src="js/custom.js"></script>
    <script src="js/vue-2.6.11.js"></script>
    <script src="js/axios-0.19.2.min.js"></script>
    <script src="js/layer.js"></script>
    <script src='xbjs/productList.js'></script>
    <script>
        $(function () {
            $('#header').load("header.html");
            $('#hot').load("hot.html");
        })
    </script>
</body>

</html>